<template>
    <div id="app">

    <mt-header  title="粉丝":fixed="is_fixed" >
        			<router-link to="/user" slot="left">
        				<mt-button icon="back">返回</mt-button>
        			</router-link>
    </mt-header>

<ul class="ui-list ui-border-b">
          <li>
            <div class="ui-avatar-s">
              <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">
            </div>
            <div class="ui-list-info ui-border-t"><h4>活着</h4></div>
          </li>
          <li>
            <div class="ui-avatar-s">
             <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">
            </div>
            <div class="ui-list-info ui-border-t"><h4>你看起来好好吃</h4></div>
          </li>
          <li>
            <div class="ui-avatar-s">
              <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">
            </div>
            <div class="ui-list-info ui-border-t"><h4>歧途</h4></div>
          </li>
           <li>
                      <div class="ui-avatar-s">
                       <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">
                      </div>
                      <div class="ui-list-info ui-border-t"><h4>兔子</h4></div>
                    </li>
                    <li>
                      <div class="ui-avatar-s">
                        <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">
                      </div>
                      <div class="ui-list-info ui-border-t"><h4>离家的孩子</h4></div>
                    </li>
                    <li>
                      <div class="ui-avatar-s">
                        <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">
                      </div>
                      <div class="ui-list-info ui-border-t"><h4>你可安好</h4></div>
                    </li>
        </ul>




    <mt-tabbar v-model="selected" fixed>
       <mt-tab-item id="tab-container1" @click.native="openIndex">
        <img slot="icon" src="../assets/1.png">
         关注
       </mt-tab-item>
       <mt-tab-item id="tab-container2" @click.native="openMusic">
      <img slot="icon" src="../assets/2.png">
         发现
       </mt-tab-item>
        <mt-tab-item id="tab-container3" @click.native="openFa">
        <img slot="icon" src="../assets/5.png" width="80">
       </mt-tab-item>
       <mt-tab-item id="tab-container4" @click.native="openSinger">
        <img slot="icon" src="../assets/3.png">
         消息
       </mt-tab-item>
       <mt-tab-item id="tab-container5" @click.native="openUser">
        <img slot="icon" src="../assets/4.png">
         个人
       </mt-tab-item>
    </mt-tabbar>


    </div>
</template>
<script>
import Vue from 'vue'
import { Header } from 'mint-ui';
import { Button } from 'mint-ui';
import { TabContainer, TabContainerItem } from 'mint-ui';
import { Tabbar, TabItem } from 'mint-ui';
import { Cell } from 'mint-ui';

Vue.component('mt-tab-container', TabContainer);
Vue.component('mt-tab-container-item', TabContainerItem);
Vue.component('mt-tabbar', Tabbar);
Vue.component('mt-tab-item', TabItem);
Vue.component('mt-button', Button);
Vue.component('mt-header', Header);
Vue.component('mt-cell', Cell);



    export default {
        name:'app',
        data () {
            return {
                selected:'',
                is_fixed:true
            }
        },
                 methods:{
                             openIndex(){
                 	            this.$router.push({
                 	                path : '/index'
                 	            })
                 	        },
                 	        openMusic(){
                 	            this.$router.push({
                 	                path : '/music'
                 	            })
                 	        },
                 	        openSinger(){
                 	            this.$router.push({
                 	                path : '/singer'
                 	            })
                 	        },
                          openFa(){
                              this.$router.push({
                                  path : '/pai'
                              })
                          },
                 	        openUser(){
                                  this.$router.push({
                                     path : '/user'
                                 })
                              }
                     	}

    }
</script>
<style>

.button{
top:24px;
left:5px;
}
.mt-cell{
text-align:left;
color:white;
}

</style>